export const pieStatics = (dom, color, seriesData, _this) => {
  var option = {
    color,
    grid: {
      containLabel: true,
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b}: <br/> 比例：{d}% <br/> 人数：{c}人"
    },
    legend: {
      left: 'center',
      bottom: '5%',
      icon: "circle",
      //每一项之间的间隔
      itemGap: 40,
      textStyle: {
        fontSize: 14,
        color: "#333333",
      },
    },
    series: [
      {
        name: '缴费进度',
        type: 'pie',
        radius: '50%',
        data: seriesData,
        //数据文字内部展示
        label: {
          normal: {
            formatter: "比例：{d}%\n人数：{c}人",
            position: seriesData.filter(item => !item.value).length ? "center" : "inner",
            fontSize: 14,
            lineHeight: 20,
          },
        },
        emphasis: {
          disabled: true,
        },
        // itemStyle: {
        //   shadowColor: 'rgba(0, 0, 0, 0.2)',
        //   shadowBlur: 15,
        //   shadowOffsetX: 2,
        //   shadowOffsetY: 2,
        // },
      }
    ]
  };
  _this.$nextTick(() => {
    if (_this.$refs[dom]) {
      _this[dom] = echarts.init(_this.$refs[dom]);
      _this[dom].setOption(option, true);
    }
  });
}

export const lineStatics = (dom, xAxisData, seriesData, seriesData2, _this, color) => {
  var dataZoom = [
    {
      brushSelect: false,
      moveHandleSize: 0,
      type: "slider",
      show: true,
      height: "5%",
      bottom: "4%",
      left: "3%",
      right: "3%",
      borderColor: "#fff",
      backgroundColor: "#F5F7F9",
      handleIcon: 'image://' + require('@/assets/img/ecatras.svg'),
      handleColor: "#8FDFFE",
      fillerColor: "#DFE7F9",
      startValue: 0,
      endValue: 11,
    },
  ];
  var option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: false,
      data: ["缴费金额", "缴费人数"],
      itemHeight: 20, // 图例icon高度
      itemWidth: 50, // 图例icon宽度
      //每一项之间的间隔
      itemGap: 40,
      textStyle: {
        fontSize: 14,
        color: "#333333",
      },
    },
    xAxis: {
      data: xAxisData,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#DDDDDD",
          type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
        },
      },
      axisLabel: {
        textStyle: {
          color: "#666666",
        },
      },
    },
    color: color ? color : ["#1476FD", "#00CA8E"],
    yAxis: [
      {
        type: "value",
        position: "left",
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#666666",
          },
        },
        splitLine: {
          //网格线
          lineStyle: {
            color: "#DDDDDD",
            type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
          },
          // show: true, //隐藏或显示
        },
      },
      {
        type: "value",
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#666666",
          },
        },
        splitLine: {
          //网格线
          lineStyle: {
            color: "#DDDDDD",
            type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
          },
          // show: false, //隐藏或显示
        },
      },],
    grid: {
      left: "3%",
      right: "3%",
      bottom: "13%",
      top: "3%",
      containLabel: true,
    },
    series: [{
      name: "缴费金额",
      type: "bar",
      barWidth: 15,
      tooltip: {
        valueFormatter: function (value) {
          return '￥' + value;
        }
      },
      data: seriesData,
    },
      {
        name: "缴费人数",
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '人';
          }
        },
        data: seriesData2,
      },
    ],
  };
  if (option.series[0].data.length > 12) {
    option.dataZoom = dataZoom
  } else {
    delete option.dataZoom
  }

  if(seriesData.filter(item => item).length || seriesData2.filter(item => item).length) {
    // 有数据时解决双y轴 刻度线与y轴对不齐问题
    option.yAxis[0].max = Math.ceil(Math.max.apply(null, option.series[0].data) / 5) * 5;
    option.yAxis[0].interval = Math.ceil(Math.max.apply(null, option.series[0].data) / 5);
    option.yAxis[1].max = Math.ceil(Math.max.apply(null, option.series[1].data) / 5) * 5;
    option.yAxis[1].interval = Math.ceil(Math.max.apply(null, option.series[1].data) / 5);
    option.yAxis[0].min = 0;
    option.yAxis[1].min = 0;
  }

  _this.$nextTick(() => {
    if (_this.$refs[dom]) {
      _this[dom] = echarts.init(_this.$refs[dom]);
      _this[dom].setOption(option, true);
    }
  });
}
